<template>
  <!--完成确认弹窗-->
  <px-dialog v-model="visible" title="处理进度" width="960px" destroy-on-close append-to-body @close="closeDialog">
    <px-table :data="processTableData" class="equip-table" size="small" max-height="400" border>
      <px-table-column type="index" label="序号" width="64" />
      <px-table-column
        v-for="(item, index) in processTableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">
          {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
        </template>
      </px-table-column>
    </px-table>
    <template #footer>
      <div class="dialog-footer">
        <px-button type="primary" @click="closeDialog">关闭</px-button>
      </div>
    </template>
  </px-dialog>
</template>

<script setup lang="ts">
import { queryDealProcess } from "@/api/erc/maintain";
import { computed, reactive, toRefs, watchEffect } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["visible", "taskId"]);

const visible = computed(() => props.visible);

const state = reactive<any>({
  processTableData: [],
  processTableColumns: [
    { prop: "eventTypeDesc", label: "操作", minWidth: "120", showOverflowTooltip: true },
    { prop: "operateName", label: "操作人", minWidth: "120", showOverflowTooltip: true },
    { prop: "operateTime", label: "操作时间", minWidth: "180", showOverflowTooltip: true },
    { prop: "approvalOpinion", label: "备注", minWidth: "400", showOverflowTooltip: true }
  ]
});
const { processTableData, processTableColumns } = toRefs(state);

watchEffect(async () => {
  if (visible.value) {
    const res = await queryDealProcess({ id: props.taskId, busType: "maintenance" });
    processTableData.value = res || [];
  }
});

const closeDialog = () => {
  emits("closeDialog");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.view-equip-detail-wrap {
  .view-equip-detail {
    height: calc(100vh - 439px);
    padding: 0;
  }
}
</style>
